<script setup>
import { ref, computed, onMounted } from 'vue'
import { useTaskStore } from '../../stores/taskStore'
import { useCategoryStore } from '../../stores/categoryStore'
import TaskList from '../../components/todo/TaskList.vue'
import AddTask from '../../components/todo/AddTask.vue'

const taskStore = useTaskStore()
const categoryStore = useCategoryStore()

// 获取所有任务
const allTasks = computed(() => taskStore.allTasks)

// 搜索功能
const searchQuery = ref('')
const filteredTasks = computed(() => {
  if (!searchQuery.value.trim()) return allTasks.value
  
  const query = searchQuery.value.toLowerCase()
  return allTasks.value.filter(task => 
    task.title.toLowerCase().includes(query) || 
    (task.description && task.description.toLowerCase().includes(query))
  )
})

// 初始化数据
onMounted(async () => {
  await categoryStore.loadCategories()
  await taskStore.loadTasks()
})
</script>

<template>
  <div class="all-tasks-view">
    <!-- 标题和搜索栏 -->
    <div class="page-header mb-6">
      <h1 class="text-h4 mb-1">全部任务</h1>
      
      <v-text-field
        v-model="searchQuery"
        prepend-inner-icon="mdi-magnify"
        label="搜索任务"
        variant="outlined"
        hide-details
        density="compact"
        clearable
        class="mt-2"
      ></v-text-field>
    </div>
    
    <!-- 添加任务 -->
    <AddTask />
    
    <!-- 任务列表 -->
    <TaskList 
      :tasks="filteredTasks" 
      title="全部待办" 
      emptyMessage="暂无任务，点击上方添加新任务"
    />
  </div>
</template>

<style scoped>
.all-tasks-view {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
</style> 